<template>
  <div class="login-main">
    <div class="input-main">
      <div class="login-title">欢迎登录后台管理系统</div>
      <div>
        <div class="label">账号</div>
        <div>
          <el-input v-model="loginInfo.number" placeholder="请输入账号" clearable></el-input>
        </div>
      </div>
      <div>
        <div class="label">密码</div>
        <div>
          <el-input v-model="loginInfo.pws" type="password" placeholder="请输入密码" clearable></el-input>
        </div>
      </div>
      <div>
        <el-button type="primary" style="width: 100%" @click="login">
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loginInfo = ref({
  number: '',
  pws: '',
})

const code = ref(null)

const instance = getCurrentInstance()

onMounted(() => {
  getCode()
})

const login = () => {
  if (!loginInfo.value.number) {
    alert('请输入账号')
    return
  }
  if (!loginInfo.value.pws) {
    alert('请输入密码')
    return
  }

  instance.proxy.$api.post('/users/backend/login', { username: loginInfo.value.number, password: loginInfo.value.pws }).then((res) => {
    if (res.data.code === 1) {
      alert('登录成功')

      localStorage.setItem('token', res.data.token)
      localStorage.setItem('userinfo', JSON.stringify(res.data.user))
      router.push('/user')
    } else {
      alert(res.data.message)
    }
  })
    .catch(() => {
      alert('登录失败')
    })
}
</script>

<style scoped>
.login-main {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aquamarine;
}

.input-main {
  width: 500px;
  height: 500px;
  background-color: white;
  border-radius: 5px;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}


.login-title {
  color: #333;
  font-size: 25px;
  font-weight: 700;
}

.label {
  margin-bottom: 10px;
}

.codebox {
  display: flex;
  gap: 12px;
}
</style>